<template>
  <div>
    <van-nav-bar title="黑马头条-极客园"
     :fixed="true" placeholder />
    <!-- 框 -->
    <van-form @submit="onSubmit"

    >
      <van-cell-group inset>
        <van-field
          v-model="form.mobile"
safe-area-inset-top
          label="手机号"
          placeholder="请输入手机号"
          required
          :rules="[{ required: true,pattern:/^1[3-9]\d{9}$/ ,message: '请填写用户名' }]"
        />
        <van-field
          v-model="form.code"
          type="password"
          name="密码"
          label="密码"
          placeholder="密码"
            required
          :rules="[{ required: true,pattern:/^\d{6}$/ ,message: '请填写密码' }]"
        />
      </van-cell-group>
      <div style="margin: 16px">
        <van-button round block type="primary" native-type="submit"
          :disabled="isLogin"
          :loading="isLogin"
         loading-text="加载中...">
          提交
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import { LoginAPI } from '@/api'
import { setToken } from '@/utils/token'
// Notify 是一个函数，调用后会直接在页面中弹出相应的消息提示。
// import { Notify } from 'vant'
import { MyNotify } from '@/utils/Notify'
export default {
  data () {
    return {
      form: {
        mobile: '13912344321',
        code: '246810'
      },
      isLogin: false
    }
  },
  methods: {
    // 登录按钮
    async  onSubmit  (values) {
      try {
        this.isLogin = true// 点击禁用
        //   console.log('submit', values)
        const res = await LoginAPI({
          ...this.form
        })
        // console.log(res)
        // 存储token

        // 成功通知
        MyNotify({ type: 'success', message: '登录成功' })
        setToken(res.data.data.token)
        localStorage.setItem('refresh_token', res.data.data.refresh_token)
        // 登录跳转
        this.$router.replace({
          path: this.$route.query.pa || '/layout'
        })
        this.isLogin = false// 登录成功后不要禁用
      } catch {
        MyNotify({ type: 'warning', message: '登录失败' })
      }
    }
  }
}
</script>

<style lang="less" scoped>
</style>
